<template>
  <div ref="radar" class="radar-wrap"></div>
</template>

<script>
import * as echarts from "echarts/core";
import { RadarChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import { TitleComponent, TooltipComponent } from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([TitleComponent, TooltipComponent, RadarChart, CanvasRenderer]);

export default {
  mounted() {
    let myChart = echarts.init(this.$refs.radar);
    let option = {
      title: {
        text: "雷氏财团经济分布图"
      },

      radar: {
        // shape: 'circle',
        indicator: [
          { name: "欧洲", max: 100 },
          { name: "亚洲", max: 100 },
          { name: "南美洲", max: 100 },
          { name: "北美洲", max: 100 },
          { name: "南极", max: 100 },
          { name: "北极", max: 100 }
        ]
      },
      tooltip: {},
      series: [
        {
          name: "财团发展情况",
          type: "radar",
          data: [
            {
              value: [100, 0, 0, 100, 100, 100],
              name: "总公司"
            },
            {
              value: [100, 100, 100, 100, 0, 0],
              name: "亚洲分公司"
            }
          ]
        }
      ]
    };
    myChart.setOption(option);
  }
};
</script>

<style>
.radar-wrap {
  width: 500px;
  height: 400px;
}
</style>
